<template>
  <div class="wrapper">
      <div class="icon"  v-for="item of recommendImg" :key="item.id">
          <div class="icon-img">
              <img class="img" :src="item.imgsrc" :class="[item.color]">
          </div>
          <div class="icon-desc">
             {{item.desc}}
          </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'homeCatalog',
  props:{
    iconList:Array  //请求但是不用
  },
  data () {
    return {
           red:'red',
           orange:'orange',
           green:'green',
           blue:'blue',
           recommendImg:[
               {
                   id:'01',
                   imgsrc: require('@/assets/img/hot.png'),
                   desc:'本地热推',
                   color:'red'
               },
                {
                   id:'02',
                   imgsrc: require('@/assets/img/Children.png'),
                   desc:'亲子活动',
                   color:'orange'
               },
                {
                   id:'03',
                    imgsrc: require('@/assets/img/therm.png'),
                   desc:'温泉项目',
                   color:'blue'
               },
               {
                   id:'04',
                    imgsrc: require('@/assets/img/Park.png'),
                   desc:'主题公园',
                   color:'green'
               }
           ]
    }
  }
}
</script>

<style lang="stylus" scoped>
    .wrapper
      background :#fff
      .icon 
       width :25%
       float :left
       padding-top:.2rem
       .img
         padding: .2rem;
         width: 37%
         display :block
         background :red
         border-radius :1rem
         margin :0 auto 
        .green
         background :#6dcf16
        .orange
         background :#fda424
        .blue
         background :#41a9f2
        .red
         background :#fd6266
        
       .icon-desc
        text-align :center
        padding-top: .2rem
        padding-bottom :.3rem
</style>